<template>
  <ContentWrap class="!mb-10px">
    <CardTitle title="划扣信息" class="font-size-16px!" />
    <el-row class="mt-15px">
      <el-col :span="24">
        <el-table :data="goodsList" :table-layout="'fixed'" style="width: 100%" border>
          <el-table-column align="center" label="原销售订单" prop="no" min-width="100">
            <template #default="{ row }">{{ row.no }}</template>
          </el-table-column>
          <el-table-column label="卡项信息" prop="spuName" min-width="300">
            <template #default="{ row }">
              <div class="flex">
                <div class="flex items-center">
                  <div class="mr-[10px] flex items-center">
                    <el-image
                      :src="row.picUrl"
                      class="!h-[48px] !w-[48px] border-rd-4px"
                      @click="imagePreview(row.picUrl)"
                    >
                      <template #error>
                        <div class="image-slot">
                          <icon icon="ep:picture" />
                        </div>
                      </template>
                    </el-image>
                  </div>

                  <ElTooltip :content="row.spuName" placement="top">
                    <span class="overflow-ellipsis overflow-hidden">
                      <meton-tag
                        v-if="row?.sales"
                        :is-dict="false"
                        class="mr-5px"
                        effect="dark"
                        type="danger"
                        color="#ff0000"
                        :value="'赠品'"
                      />
                      {{ row.spuName }}
                      <meton-tag
                        :is-dict="false"
                        :is-text="true"
                        v-if="row.specType"
                        :value="`${skuSpecFormat(row?.properties)}`"
                      />
                    </span>
                  </ElTooltip>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" label="订单金额" prop="totalPrice">
            <template #default="{ row }"
              ><div> {{ fenToYuan(row.totalPrice) }}元 </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="实付金额" prop="otherPrice">
            <template #default="{ row }">{{ fenToYuan(row.otherPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="资产抵扣" prop="assetPrice">
            <template #default="{ row }">{{ fenToYuan(row.assetPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="剩余欠款" prop="leavePrice">
            <template #default="{ row }">{{ fenToYuan(row.leavePrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="上次结余" prop="masterBalance">
            <template #default="{ row }">{{ row.masterBalance }}</template>
          </el-table-column>
          <el-table-column align="center" label="本次划扣" prop="price">
            <template #default="{ row }">{{ row.price }}</template>
          </el-table-column>
          <el-table-column align="center" label="当前剩余" prop="giveBalance">
            <template #default="{ row }">{{ row.giveBalance }}</template>
          </el-table-column>
          <el-table-column align="center" label="卡项状态" prop="payPrice">
            <template #default="{ row }"
              ><DictTag :type="DICT_TYPE.METON_CARD_STATUS" :value="row.status"
            /></template>
          </el-table-column>
          <!--  方便扩展每个订单配置的属性不一样  -->
          <slot name="extension"></slot>
        </el-table>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { createImageViewer } from '@/components/ImageViewer'
import { CardTitle } from '@/components/Card'
import { DICT_TYPE } from '@/utils/dict'
import { skuSpecFormat } from '@/utils'

defineOptions({ name: 'OrderServiceInfo' })

defineProps({
  goodsList: propTypes.array.def([])
})
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
</script>
